<template>
  <div id="order-page" v-loading="myLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       :style="{
    minHeight:(this.getWinSize().height-37-this.getSafeArea().top)+'px',
  }">
    <div id="search-bar" class="product-search-bar" :style="{top:(this.getSafeArea().top)+'px'}">
      <div id="search-box">
        <div id="search-input-outer">
          <el-input
            clearable
            type="text"
            class="search-bar-input"
            v-model="searchForm.name"
            @keyup.enter.native="getProductList"
            placeholder="搜索你想要的商品..."/>
<!--          <el-button type="primary" id="search-button" @click="getProductList">搜索</el-button>-->
          <div class="c"></div>
        </div>
        <div class="c"></div>
      </div>
      <div class="left back-button" style="font-size: 12px;" @click="$router.push('/ProductForm?type=add')">
        新增
      </div>
    </div>



    <i-scroller-box
      class="order-list"
      ref="i-scroller-box"
      url="Product/getList"
      style="position: relative;"
      :height="getWinSize().height-78-this.getSafeArea().top"
      :style="{
        paddingTop:(this.getSafeArea().top+38)+'px',
       width:'100%'}">

      <template v-slot:list-item="{index,data}">
        <product-list-item :change-call-back="getProductList" :show-type="0" :curr-product="data"/>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import OrderActButton from '../common/OrderActButton'
import IScrollerBox from '../common/IScrollerBox'
import ProductListItem from '../common/ProductListItem'

export default {
  name: 'ProductList',
  components: {ProductListItem, IScrollerBox, OrderActButton},
  data: function () {
    return {
      searchForm: {
        name: '',
        status: '',
        createdAt: '',
      },
      statusArr: [],
      currStatus: '',
      orderList: [],
      myLoading: false,
    }
  },
  mounted () {
    this.statusArr = [{
      'key': '',
      'name': '全部'
    }].concat(dict.OrderStatusNameArr)
    if (this.$route.query.status && this.$route.query.status !== '') {
      this.searchForm.status = this.$route.query.status
    }

    this.getProductList()

    let $this = this
    window.onscroll = function () {
      let scrollPos = $this.getScrollTop()
      let maxHeight = $this.getScrollHeight() - $this.getWinSize().height
      if (scrollPos === 0) {
        // 到达顶部
        // $this.getOrderList()
      }
      // 到达底部
      if (maxHeight - scrollPos <= 0) {
        console.log('到达底部')
        $this.getOrderList()
      }
    }
  },
  destroyed () {
    window.onscroll = null
  },
  methods: {
    chooseDateTime: function () {
      this.bus.$emit('ChooseDateTimeDialogCallBus', this.setSearchDateTime, this.searchForm.createdAt)
    },
    setSearchDateTime: function (dateTime) {
      this.searchForm.createdAt = dateTime
      this.getProductList()
    },
    getProductList: function () {
      this.$refs['i-scroller-box'].getList({
        page: 1,
        pageSize: 30,
        form: this.searchForm
      })
    },
  }
}
</script>

<style scoped>

</style>
